<!--
- File:    商店列表页.
-->
<template>
  <div class="Web_Box" style="padding-top:50px;">
    <header class="heard">
      <div class=" xd top_bg">
        <div class="list_search" style="width: 12rem">
          <form action="" @submit="search">
            <input style="width: 10rem" type="search" placeholder="请输入搜索关键字" autocomplete="off" v-model="keyword"><i class="iconfont icon-search" @click="search"></i>
          </form>
        </div>
        <router-link class="location" :to="{name: 'location-select'}">
          <p style="width: 3rem; display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{location.name}}</p>
          <span>[切换城市]</span>
        </router-link>
      </div>
    </header>
    <div class="store">
      <div class="store_box" v-for="store in storeList.data">
        <ul class="f-cb store_top">
          <li class="store_img"><img :src="store.store_avatar?$config.imgsite + $config.storeAvatarSrc + store.store_avatar + '_w150': defaultShopAvatar"></li>
          <li class="tit_b"><h2 class="tit_tex" style="font-size: 16px;">{{store.store_name}}</h2>
            <p class="tits">销量&nbsp;&nbsp;{{store.sale_count}}&nbsp;&nbsp;&nbsp;共{{store.goods_count}}件商品</p></li>
          <li class="fr"><a href="javascript:void(0)" class="store_ent" @click="gotoStoreIndex(store)">进店</a></li>
        </ul>
        <ul class="f-cb store_cont">
          <li v-for="goods in store.goods_list" @click="gotoGoodsDetail(store.store_id, goods.goods_commonid)">
            <div>
              <img :src="$config.imgsite + $config.goodsImgSrc + store.store_id + '/' + goods.goods_image + '_w200'"><span class="store_price">￥{{goods.goods_price}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <empty-data :show="storeList.allLoaded && storeList.data.length <= 0" text="当前城市暂无店铺" style="margin-top: 1.5rem"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
  import * as storage from '../../storage'

  export default{
    beforeRouteEnter (to, from, next) {
      let location = storage.getLocation()
      if (!location) {
        next({name: 'location-select'})
      }
      next()
    },
    data() {
      return {
        keyword: '',
        location: this.$storage.getLocation() || {code: '', name: '请选择'},
        storeList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        defaultShopAvatar: require('../../assets/images/ShopPhoto.png')
      }
    },
    created() {
      // this.$native.weixinShare(window.location.href)
      this.getStoreList(this.location.code, this.storeList.page, this.storeList.pageSize)
    },
    methods: {
      gotoGoodsDetail(storeId, goodsCommonid) {
        this.$storage.setStore(storeId)
        this.$router.push({name: 'goods-detail', params: {id: goodsCommonid}, query: {storeId: storeId}})
      },
      gotoStoreIndex(store) {
        this.$storage.setStore(store.store_id)
        this.$router.push({name: 'home', query: {storeId: store.store_id}})
      },
      search(e) {
        e.preventDefault()
        this.storeList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getStoreList(this.location.code, this.storeList.page, this.storeList.pageSize)
      },
      getStoreList(cityId, page, pageSize) {
        this.storeList.loading = true
        this.$request.getStoreList(cityId, page, pageSize, this.keyword).then(data => {
          if (data.length < this.storeList.pageSize) {
            this.storeList.allLoaded = true
          }
          this.storeList.data = [...this.storeList.data, ...data]
        }).finally(() => {
          this.storeList.requested = true
          this.storeList.loading = false
        })
      },
      loadMore() {
        if (this.storeList.loading || this.storeList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getStoreList(this.location.code, ++this.storeList.page, this.storeList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>